<template>
  <view class="container">
    <view class="card" style="padding-bottom: 16rpx">
      <view class="card-title"><text class="title">承租人信息</text></view>
      <view class="line"></view>
      <view class="deposit-item">
        <view class="deposit-item-label">承租人姓名</view>
        <view class="deposit-item-content">{{ codeInfo.memberName }}</view>
      </view>
      <view class="deposit-item">
        <view class="deposit-item-label">承租人手机号</view>
        <view class="deposit-item-content">{{ codeInfo.memberPhone }}</view>
      </view>
    </view>
    <view class="card">
      <view class="card-title">
        <text class="title">需授权押金</text>
        <text class="extra">{{ codeInfo.carDeposit }}元</text>
      </view>
      <view class="line"></view>
      <view class="deposit-item">
        <view class="deposit-item-label">租车押金</view>
        <view class="deposit-item-content">
          <text>{{ codeInfo.carDeposit }} 元</text>
        </view>
      </view>
      <view class="deposit-item">
        <view class="deposit-item-label">违章押金</view>
        <view class="deposit-item-content">
          <text>{{ codeInfo.illegalDeposit }} 元</text>
        </view>
      </view>
      <!-- 二维码区域 -->
      <view class="scan-code-wrapper" v-if="showScanCode || maskSrc">
        <view class="line"></view>
        <view class="scan-code-content" v-if="!imgUrlFetching">
          <view class="scan-code">
            <image v-if="showScanCode" :src="codeInfo.aliCodeUrl" mode="widthFix"></image>
            <block v-if="maskSrc">
              <view class="scan-code-mask"></view>
              <view class="scan-code-mask-image">
                <image :src="maskSrc" mode="widthFix" />
              </view>
            </block>
          </view>
        </view>
        <view class="scan-code-loading" v-else>
          <uni-load-more :iconSize="24" iconType="snow" status="loading" :contentText="{ contentrefresh: '二维码加载中...' }" />
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    // 免押码信息
    codeInfo: {
      type: Object,
      default: () => {},
    },
    // 遮罩图片路径
    maskUrl: String,
    imgUrlFetching: Boolean,
  })

  // 遮罩 src
  const maskSrc = computed(() => {
    return props.maskUrl ? `/static/images/free-deposit-code/${props.maskUrl}` : ''
  })

  // 是否显示二维码区域
  const showScanCode = computed(() => {
    const { carDeposit, illegalDeposit } = props.codeInfo
    // 需授权金额为0时，二维码屏蔽
    if (carDeposit == 0) {
      return false
    }
    // 租车押金小于违章押金，二维码屏蔽
    if (carDeposit < illegalDeposit) {
      return false
    }
    return true
  })
</script>

<style lang="less" scoped>
  .container {
    padding: 24rpx;
    box-sizing: border-box;
    .card {
      padding: 32rpx 24rpx 40rpx;
      background: #ffffff;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      .card-title {
        display: flex;
        justify-content: space-between;
        line-height: 44rpx;
        font-weight: 600;
        margin-bottom: 32rpx;
        .title {
          font-size: 32rpx;
          color: #191c27;
        }
        .extra {
          font-size: 30rpx;
          color: #3072f6;
        }
      }
      .deposit-item {
        padding: 16rpx 0;
        font-size: 30rpx;
        line-height: 44rpx;
        display: flex;
        .deposit-item-label {
          width: 200rpx;
          color: #8491a8;
        }
        .deposit-item-content {
          display: flex;
          color: #191c27;
          text {
            width: 170rpx;
          }
        }
      }
      .scan-code-wrapper {
        min-height: 240rpx;
        .scan-code-content {
          position: relative;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          .scan-code {
            width: 240rpx;
            margin-top: 10rpx;
            display: block;
            position: relative;
            image {
              width: 240rpx;
            }
            .scan-code-mask {
              background: rgba(255, 255, 255, 0.73);
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
            }
          }
          .scan-code-mask-image {
            width: 186rpx;
            position: absolute;
            top: 42rpx;
            left: 27rpx;
            z-index: 2;
            image {
              width: 186rpx;
            }
          }
        }
      }
    }
    .card + .card {
      margin-top: 24rpx;
    }
    .line {
      margin: 16rpx 0;
      width: 100%;
      height: 2rpx;
      background: rgba(216, 216, 216, 0.3);
    }
  }
  .scan-code-loading {
    height: 330rpx;
    padding-top: 140rpx;
  }
</style>
